<template>
	<transition name="slide">
		<MusicList :songs="songs" :title="title" :bg-image="bgImage"></MusicList>
		<router-view></router-view>
	</transition>
</template>

<script>
import {mapGetters,mapMutations} from 'vuex'
import {VoCalist} from 'api/singer'; //首页请求方式
import MusicList from 'components/music-list/music-list'
export default {
  name: 'singerdetail',
	data() {
		return {
			songs: [],
		}
	},
	created() {
		this._getDetail()
	},
	methods: {
		_getDetail(){//首页歌手数据
			if(!this.singer.id){
				this.$router.push('/singer')
				return
			}
			if(this.singer.name){
			let url=VoCalist(this.singer.name,1)
			this.$axios.get(url).then((res)=>{
				if(res.status==200){this.songs=res.data.data}
			}).catch((err)=>{console.log(err)})
			}
		}
	},
	computed:{
		title(){
			return this.singer.name
		},
		bgImage(){
			return this.singer.avatar
		},
		...mapGetters([
			'singer',
		])
	},
	components:{
		MusicList
	}
	
}
</script>

<style lang="scss" scoped >
	.slide-enter-active,.slider-leave-active{transition: all .3s;}
	.slide-enter,.slider-leave-to{transform: translate3d(100%,0,0);}
</style>